import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
const ImageWithToken = ({ src, token, her }) => {
  const [imageSrc, setImageSrc] = useState(
    'https://119.188.246.51:5009/loading.jpg'
  )
  useEffect(() => {
    const showLoading = () => {
      document.getElementById('loading').style.display = 'block'
    }

    // 隐藏加载动画
    const hideLoading = () => {
      document.getElementById('loading').style.display = 'none'
    }
    // hideLoading()
    const fetchImage = async () => {
      try {
        const response = await axios({
          method: 'GET',
          url: publicIp + '/' + src, // 你的图片资源URL
          headers: {
            'Content-Type': 'application/json',
            Authorization: 'token ' + sessionStorage.getItem('token'), // 设置token
            token: sessionStorage.getItem('token') || '',
          },
          responseType: 'blob', // 设置响应类型为blob
        })
        const imageBlob = new Blob([response.data], { type: 'image/jpeg' })
        const imageUrl = URL.createObjectURL(imageBlob)
        setImageSrc(imageUrl)
      } catch (error) {
        console.error('Error fetching image:', error)
      }
    }

    fetchImage()
    // 显示加载动画
  }, [token])

  return (
    <img
      style={{
        display: 'block',
        width: '257px',
        textAlign: 'center',
        lineHeight: '200px',
        height: '168px',
      }}
      src={imageSrc}
      id="loading"
      alt=""
    />
  )
}

export default ImageWithToken
